<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 粒子化demo </title>
    <style type="text/css">
      body {margin:0; padding:0; wdith:100%; height: 100%}
      canvas {display:block; background-color:#000}
    </style>
  </head>
  <body bgcolor='#000'>
    <script src='js/vector.js'></script>
    <script src='js/common.js'></script>
    <script>
          window.canvas = document.createElement('canvas'); 
          document.body.appendChild(window.canvas); 
          canvas.height = window.height = window.innerHeight;
          canvas.width = window.width = window.innerWidth;
          window.ctx = canvas.getContext('2d');
          window.vpx = width / 2;
          window.vpy = height / 2;
          
          // document.addEventListener('mousemove', function(event){
          //   var x = event.clientX - window.vpx;
          //   var y = event.clientY - window.vpy;
          //   window.angleY = -x * 0.0001;
          //   window.angleX = y * 0.0001;
          // });

          function Ball(v, r, color) {
            this.now = new Vector3(v.x - 200, v.y - 200, v.z + 300);
            this.pos3 = v;

            this.v = new Vector3(5, 1, 0);

            this.r = r;
            this.color = color;
            // this.color = 'rgb(150,50,100)'

            this.pos2 = new Vector2();
            this.radius = undefined;

            this.index = +new Date;
            this.g = getRandomNum(5, 10);
          }

          // z轴扁平化
          Ball.prototype.flattening = function() {
            // focalLength 表示当前焦距，一般可设为一个常量
            // var focalLength = 250;
            var focalLength = Math.max(width, height);
            
            // 把z方向扁平化
            var scale = focalLength / (focalLength + this.pos3.z);
            this.pos2.x = window.vpx + this.now.x * scale;
            this.pos2.y = window.vpy + this.now.y * scale;
            this.radius = this.r * scale;
            if(this.pos2.y + 5 >= height) {
                this.v.y *= -0.7;
                this.pos2.y = height - 5;
            }
          };

          Ball.prototype.draw = function() {
            this.flattening();
            ctx.beginPath();
            ctx.arc(this.pos2.x, this.pos2.y, this.radius, 0, Math.PI * 2);
            ctx.fillStyle = this.color;
            ctx.fill();
          };

          Ball.prototype.update = function() {
            if(+new Date - this.index < 2000) {
              var a = this.now.getDistance(new Vector3(this.pos3.x, this.pos3.y, this.now.z));
              var b = this.now.z - this.pos3.z;
              var a1 = 10 / Math.sqrt(a * a + b * b) * b; // z
              var a2 = 10 / Math.sqrt(a * a + b * b) * a;

              var c = this.pos3.x - this.now.x;
              var d = this.pos3.y - this.now.y;
              var a3 = a2 / Math.sqrt(c * c + d * d) * c; // x
              var a4 = a2 / Math.sqrt(c * c + d * d) * d; // y

              var p = 1 / 200;
              this.v.x = (this.v.x + a3 * p) * 0.99;
              this.v.y = (this.v.y + a4 * p) * 0.99;
              this.v.z = (this.v.z + a1 * p) * 0.99;

              this.now.x += this.v.x;
              this.now.y += this.v.y;
              this.now.z += this.v.z;
            } else {
              var p = 1 / 1000 * 60;
              this.v.y = (this.v.y + this.g * p) * 1;
              this.now.x += this.v.x;
              this.now.y += this.v.y;
              this.now.z += this.v.z;
            }
          };

          function Collection() {
            this.balls = [];
          }

          Collection.prototype.draw = function() {
            ctx.fillStyle = 'rgba(0,0,0,0.1)'
            ctx.fillRect(0, 0, width, height);
            for(var i = 0, len = this.balls.length; i < len; i++) 
              this.balls[i].draw();
          };

          Collection.prototype.update = function() {
            for(var i = this.balls.length - 1; i >= 0; i--) {
              this.balls[i].update();
              Math.abs(this.balls[i].v.y) < 1 && Math.abs(this.balls[i].pos2.y - height) < 10 && this.balls.splice(i, 1);
            }
              
          };

          Collection.prototype.getTextPoints = function() {
            var ocanvas = document.createElement('canvas'); 
            // document.body.appendChild(window.canvas); 
            ocanvas.height = window.innerHeight;
            ocanvas.width = window.innerWidth;
            var octx = ocanvas.getContext('2d');
            octx.drawImage(img, 0, 0);
            var imgData = octx.getImageData(0, 0, width, height);

            for(var i = 0; i < imgData.width; i+=2)
              for(var j = 0; j < imgData.height; j+=2) {
                var index = (i + j * imgData.width) * 4 + 3;
                if(imgData.data[index] > 125) {
                  var v = new Vector3(i * 10 - 200, j * 10 - 200, 0);
                  var color = getRandomColor();
                  c.balls.push(new Ball(v, 5, color));
                }
              }
          };

          // init
          var c = new Collection();
          var img = new Image();
          img.src = "img/love.png";
          img.onload = function () {
            c.getTextPoints();
          }

          
          // setInterval(function() {
          //   c.draw();
          //   c.update();
          // }, 1000 / 60);

          //调用 相当于setTimeout里的callback
          function animationLoop(){   
            // logic  
            c.draw();
            c.update();
            requestAnimFrame(animationLoop);
          }  

          // 启动
          requestAnimFrame(animationLoop);
    </script>
  </body>
</html>